基于若依VUE实现图片上传保存到数据库和下载预览功能

您所在的位置：网站首页 › 数据库图片存储在哪里看 › 基于若依VUE实现图片上传保存到数据库和下载预览功能

基于若依VUE实现图片上传保存到数据库和下载预览功能

2024-07-10 01:46| 来源: 网络整理| 查看: 265

图片上传前台代码

上传图片表单部分

确定取消下载表单提交方法中获取file对象并放入formData 中传到后台 var formData = new FormData(); formData.append('file', document.getElementById('file_input').files[0]); addBin(formData).then(response => { if (response.code === 200) { this.msgSuccess("新增成功"); this.open = false; this.getList(); } }); // 新增 export function addBin(data) { console.log(data.file) return request({ url: '/system/bin', method: 'post', data: data }) } 后台代码

获取mysql数据库链接，调用执行insert方法

public Connection getConnection() throws Exception{ String url = "jdbc:mysql://***.***.**.***:3306/***?characterEncoding=utf-8&serverTimezone=UTC"; String user = "**"; String password = "**"; Class.forName("com.mysql.cj.jdbc.Driver"); Connection conn = DriverManager.getConnection(url, user, password); return conn; } //增加图片 public void save(File file) throws Exception{ Connection conn = getConnection(); String sql = "insert into tab_bin (filename,data) values(?,?)"; PreparedStatement prest = conn.prepareStatement(sql); String filename=file.getName(); prest.setString(1, filename);/ FileInputStream fis = new FileInputStream(file); prest.setBlob(2, fis,file.length()); prest.execute(); //执行 if(prest!=null){ prest.close(); } if(conn!=null){ conn.close(); } }

接收方法，调用上一步插入图片插入成功

/** * 新增文件 */ @PreAuthorize("@ss.hasPermi('system:bin:add')") @Log(title = "文件", businessType = BusinessType.INSERT) @PostMapping public AjaxResult add( @RequestParam("file") MultipartFile file) throws Exception { File toFile = null; if (file.equals("") || file.getSize() { this.download(response.msg); }).catch(function() {}); },

后台下载方法

/** * 下载文件 */ @GetMapping("/download") public AjaxResult download(TabBin tabBin) throws Exception { Connection conn = getConnection(); System.out.print("1"); String filename=tabBin.getFilename(); String sql = "select * from tab_bin where filename= '"+filename+"'"; PreparedStatement prest = conn.prepareStatement(sql); ResultSet rs = prest.executeQuery(); OutputStream out = null; while(rs.next()){ Blob bl = rs.getBlob("data"); InputStream is = bl.getBinaryStream(); //查看blob,可以通过流的形式取出来。 BufferedInputStream buffis = new BufferedInputStream(is); //保存到buffout，就工程目录下的filename的文件 BufferedOutputStream buffout = new BufferedOutputStream( new FileOutputStream(getAbsoluteFile(filename))); byte[] buf= new byte[1024]; int len = buffis.read(buf, 0, 1024); while(len>0){ buffout.write(buf); len=buffis.read(buf, 0, 1024); } buffout.flush(); buffout.close(); buffis.close(); } if(prest!=null){ prest.close(); } if(conn!=null){ conn.close(); } return AjaxResult.success(filename); } 图片预览

前台打开修改界面时，提前调用查询图片方法，传入文件名

/** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getBin(id).then(response => { this.form = response.data; this.open = true; this.title = "修改文件"; this.queryParams.filename=this.form.filename; const queryParams = this.queryParams; updownload(queryParams).then(response => { console.log(response); //增加判断 if(this.queryParams.filename.indexOf(".png") != -1){ this.form.data='data:image/png;base64,'+response.msg; }else if(this.queryParams.filename.indexOf(".jpg") != -1){ this.form.data='data:image/jpg;base64,'+response.msg; } }) }); },

后台返回转好的base64码，注意图片格式。这里我只用了png和jpg

@GetMapping("/updownload") public AjaxResult updownload(TabBin tabBin) throws Exception { Connection conn = getConnection(); System.out.print("1"); String filename=tabBin.getFilename(); String sql = "select * from tab_bin where filename= '"+filename+"'"; PreparedStatement prest = conn.prepareStatement(sql); ResultSet rs = prest.executeQuery(); OutputStream out = null; String result=""; while(rs.next()){ Blob realBlob = rs.getBlob("data"); // 创建byte数组输出对象 ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); // 创建一个长度为100的byte数组 byte[] buff = new byte[100]; int rc = 0; // 获取BLOB数据对象的二进制流 InputStream binaryStream = realBlob.getBinaryStream(); while ((rc = binaryStream.read(buff, 0, 100)) > 0) { byteArrayOutputStream.write(buff, 0, rc); } byte[] byteArray = byteArrayOutputStream.toByteArray(); result = Base64.getEncoder().encodeToString(byteArray); } if(prest!=null){ prest.close(); } if(conn!=null){ conn.close(); } return AjaxResult.success(result); }

前台显示，主要是img标签src绑定值替换为后台传过来的base64编码即可达成预览效果。

【本文地址】

基于若依VUE实现图片上传保存到数据库和下载预览功能

基于若依VUE实现图片上传保存到数据库和下载预览功能

今日新闻

推荐新闻